<template>
  <a-layout class="layout">
    <a-layout-content class="layout-content">
      <a-card style="height: 520px" :body-style="{padding:0}">
        <a-flex>
          <div class="enterprise">
            <a-space class="margin-bottom">
              <a-button type="text" class="ant-icon-only" size="large" shape="circle" @click="$router.go(-1)">
                <arrow-left-outlined />
              </a-button>
              <a-divider type="vertical"/>
              <span class="card-header-title">我的企业</span>
              <a-tag :bordered="false">{{store.enterpriseList.length}}</a-tag>
            </a-space>
            <div class="enterprise-list">
              <a-card hoverable v-for="item in store.enterpriseList"  class="margin-bottom" @click="onSwitch(item)" size="small">
                <a-flex justify="space-between" align="center">
                  <a-space>
                    <a-avatar :size="48" :src="item.avatar"/>
                    <div>
                      <div class="font-size-lg margin-bottom-sm">{{item.name}}</div>
                      <a-tag :color="item.role_style">{{item.role_name}}</a-tag>
                    </div>
                  </a-space>
                  <a-tooltip title="切换并进入">
                    <a-button type="text" shape="circle"><arrow-right-outlined/></a-button>
                  </a-tooltip>
                </a-flex>
                <a-empty v-if="store.enterpriseList.length === 0" :image="simpleImage"/>
              </a-card>
            </div>
          </div>
          <div class="cover">
            <div class="desc">
              <div class="card-header-title margin-bottom-md">简单工作，快乐生活！</div>
              <span class="color-gray">快速简洁任务、订单、项目、账务、客户、产品SaaS轻云平台</span>
            </div>
            <img src="@/assets/svg/enterprise_cover.svg" alt="" width="100%">
            <div class="handle">
              <a-space>
                <join-team/>
                <create-team/>
              </a-space>
            </div>
          </div>
        </a-flex>
      </a-card>
    </a-layout-content>
  </a-layout>
</template>
<script setup lang="ts">
import { Empty } from 'ant-design-vue';
const simpleImage = Empty.PRESENTED_IMAGE_SIMPLE;
import CreateTeam from "./components/CreateTeam.vue";
import JoinTeam from "./components/JoinTeam.vue";
import {useEnterpriseStore} from "@/store/enterprise";
import {onMounted} from "vue";
import {ArrowRightOutlined,ArrowLeftOutlined} from "@ant-design/icons-vue";
import {useRouter} from "vue-router";
import useMessage from "@/plugin/useMessage";

const router = useRouter()
const store = useEnterpriseStore()

onMounted(()=>{
  store.getEnterpriseList()
})

const onSwitch = (item:EnterpriseType)=>{
  store.setCurrentEnterprise(item)
  useMessage(200,'团队切换成功，正在为您跳转工作台,请稍等...')
  setTimeout(()=>{
    router.push('/')
  },2000)
}
</script>

<style scoped>
.layout {
  height: 100vh;
  min-height: 100vh;
}
.layout-content{
  padding-top: 100px;
  width: 900px;
  margin: 0 auto;
}
.back{
  font-size: 20px;
  cursor: pointer;
}
.enterprise{
  flex: 1;
  padding: 24px 32px;
}
.cover{
  border-radius:0 var(--radius) var(--radius) 0;
  overflow: hidden;
  height: 520px;
  width: 360px;
  position: relative;
}
.handle {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
  padding: 0 0 48px 0;
}
.desc{
  padding: 24px;
  font-size: 14px;
  position: absolute;
  top: 24px;
  left: 0;
  width: 100%;
}
</style>